<template>
    <div class="h100">
        <header class='demos-header'>
            <h1 class="demos-title">添加设备</h1>
        </header>
        <form id="device_form">
            <div class="weui-cells__title">设备类型</div>
            <div>
                <!--<label class="weui-cell weui-check__label" for="child_type">-->
                    <!--<div class="weui-cell__bd">-->
                        <!--<p>亲联设备</p>-->
                    <!--</div>-->
                    <!--<div class="weui-cell__ft">-->
                        <!--<input type="radio" class="weui-check" name="device_type" required tips="请扫码选择类型"-->
                               <!--id="child_type"-->
                               <!--value="0" disabled>-->
                        <!--<span class="weui-icon-checked"></span>-->
                    <!--</div>-->
                <!--</label>-->
                <label class="weui-cell weui-check__label">
                    <div class="weui-cell__bd">
                        <p>亲联设备{{device_type<0 ? '' : (
                            device_type==0?'-P9':'-P8'
                        )}}</p>
                    </div>
                    <!--<div class="weui-cell__ft">-->
                        <!--<input type="radio" name="device_type" class="weui-check" id="old_type" value="1" disabled>-->
                        <!--<span class="weui-icon-checked"></span>-->
                    <!--</div>-->
                </label>
            </div>

            <div class="weui-cells__title">选项</div>
            <div class="weui-cells weui-cells_form">

                <label class="weui-cell weui-check__label">
                    <div class="weui-cell weui-cell_vcode">
                        <div class="weui-cell__hd">
                            <label class="weui-label">设备名称</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" name="nicky_name" id="nicky_name" type="text"
                                   placeholder="请输入设备昵称">
                        </div>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" style="margin-top:2vw;padding-bottom:10px;border-bottom: 1px solid #e5e5e5;">
                    <div class="weui-cell weui-cell_vcode">
                        <div class="weui-cell__hd">
                            <label class="weui-label">绑定码</label>
                        </div>
                        <div class="weui-cell__bd">
                            <button v-show="!sn" type="button" id="scan_btn" class="weui-btn weui-btn_mini weui-btn_primary" @click="scan_code">
                                点击扫码
                            </button>
                            <input v-show="sn" class="weui-input" name="sn" id="sn" type="text" placeholder="请扫描设备二维码" disabled>
                        </div>
                    </div>
                </label>
                <div class="weui_btn_area" style="margin-top:10px;">
                    <a class="weui-btn weui-btn_primary" @click="submit" id="subForm" style="width: 90vw;">提交</a>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    import {http} from "../../static/js/common";

    export default {
        props: ['content'],
        data() {
            return {
                sn: '',
                device_type: -1
            }
        },
        methods: {
            scan_call_back: function (jsonRes) {
                if (jsonRes.hasOwnProperty("device") && jsonRes.hasOwnProperty("type")) {

                    // $.alert(JSON.stringify(jsonRes));

                    this.sn = jsonRes.device;
                    $("#sn").val(jsonRes.device);

                    let device_type = jsonRes.type.toLowerCase();

                    $("#device_type").val(device_type);

                    if (device_type === "p9") {
                        this.device_type = 0
                    } else {
                        this.device_type = 1
                    }
                } else {
                    $.alert("不是正确的设备二维码", "注意")
                }
            },
            scan_code() {
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: (res) => {
                        let jsonRes = res.resultStr; // 当needResult 为 1 时，扫码返回的结
                        try {
                            if (jsonRes !== 'scan resultStr is here') {
                                jsonRes = JSON.parse(jsonRes);
                                this.scan_call_back(jsonRes);
                            } else {
                                http({
                                    url: `get_scan_info`,
                                    param: {}
                                }).then(data => {
                                  this.scan_call_back(data);
                                });
                                // {"device": "868403031127308", "type": "p8"}
                                jsonRes = {
                                    device: '868403031127311',
                                    type: 'p9',
                                };
                            }
                        } catch (e) {
                            $.alert("不是正确的设备二维码", "注意")
                        }
                    },
                    error: function (res) {
                        if (res.errMsg.indexOf('function_not_exist') > 0) {
                            alert('版本过低请升级')
                        }
                    },
                    cancel: function () {

                    }
                });
            },
            submit() {
                let form = $('#device_form');
                if ($("#sn").val().length === 0 || $("#sn").val() == "") {
                    $.alert("请先点击扫码绑定设备", "注意")
                    return false;
                }
                if ($("#nicky_name").val().length === 0 || $("#nicky_name").val() == "") {
                    $.alert("请输入昵称", "注意")
                    return false;
                }
                let disabled = form.find(':input:disabled').removeAttr('disabled');
                let data = form.serialize();
                disabled.attr('disabled', 'disabled');

                data += "&device_type=" + this.device_type

                http({
                    url: 'tie_device',
                    param: data
                }).then(data => {
                    if (data.err === 0) {
                        $.alert("成功", "设备已经绑定成功，点击确定返回设备管理页面。", () => {
                            http({
                                url: `get_user_info`,
                                param: {}
                            }).then(data => {
                                this.$emit('state', {
                                    userInfo: data.info,
                                    page: 'add_device'
                                });
                            });
                        });
                    } else {
                        let alertText = (data.msg ? data.msg : "设备绑定失败，点击确定返回设备管理页面。")
                        $.alert("警告", alertText, function () {
                        });
                    }
                });
            }
        }
    }

    //     websocket = new WebSocket("127.0.0.1:5002");
    //        websocket.onopen = function(evt) {
    //            console.log(evt)
    //        };
    //        websocket.onclose = function(evt) {
    //            console.log(evt)
    //        };
    //        websocket.onmessage = function(evt) {
    //            console.log(evt)
    //        };
    //        websocket.onerror = function(evt) {
    //            console.log(evt)
    //        };

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .weui_btn_area {
        margin: 0 0 10vw 0;
    }

    .weui-cells__title {
        margin-top: 1em;
        margin-bottom: 0;
        padding-left: 0;
    }

    .weui-cell__bd {
        color: #050079;
        font-weight: bold;
    }

    .weui-label {
        color: #050079;
        font-weight: bold;
    }

    .weui-cell{
        padding: 0 15px;
    }
</style>
